<template>
  <!--交付计划/订单明细视图-->
  <div style="background-color: #E9EEF3;">
    <el-row>
      <el-col :span="18" :offset="3" style="color: #333333;margin-bottom: 20px;margin-top: 20px;">
        <el-row style="background:#ffffff;padding:0 20px">
          <el-col :span="24">
            <div class="dialog__header">
              <span class="dialog__title">交付计划</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="background:#ffffff;padding:0 20px">
          <el-form label-width="100px" :rules="rules">
            <el-row>
              <el-col :span="12">
                <el-form-item label="产品名称:" prop="name" style="width: 830px">
                  <el-input placeholder="产品名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对应客户:" style="width: 830px">
                  <el-input></el-input>
                </el-form-item>
                <div class="form-inline">
                  <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                  <el-button size="medium" icon="el-icon-search"></el-button>
                  <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                    <el-button size="medium" icon="el-icon-s-operation"></el-button>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同订单:">
                  <el-select placeholder="未选" style="width: 730px" ></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单数量:" style="width: 395px">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单价:" style="width: 395px">
                  <el-input ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="型号/类型:" style="width: 395px">
                  <el-input ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额:" style="width: 395px">
                  <el-input :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划交付日期:" style="width: 395px">
                  <el-date-picker  type="date" placeholder="选择日期" style="width: 296px"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="已交付:" style="width: 395px">
                  <el-input :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所有者:" style="width: 370px">
                  <el-input style="width: 296px">
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期次:">
                  <el-select v-model="periodvalue" placeholder="未选">
                    <el-option
                      v-for="item in periods"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="要求:" style="width: 830px">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="交付条件:" style="width: 830px">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="margin-left: 56px;margin-bottom: 20px">
                <span style="padding-right: 10px">状态:</span>
                <el-radio-group v-model="radio">
                  <el-radio :label="1">提醒</el-radio>
                  <el-radio :label="2">不提醒</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" style="width: 830px">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="6">
                <el-form-item>
                  <el-button type="primary">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {

      /*下拉框条件查询*/
      options: [{
        label: '',
        options: [{
          value: 'all',
          label: '全部数据'
        }]
      }, {
        label: '状态',
        options: [{
          value: 'status1',
          label: '执行中'
        }, {
          value: 'status2',
          label: '结束'
        }, {
          value: 'status3',
          label: '意外终止'
        }, {
          value: 'status4',
          label: '无退货'
        }, {
          value: 'status5',
          label: '有退货'
        }]
      }, {
        label: '未结束',
        options: [{
          value: 'unfinish1',
          label: '未结束订单'
        }, {
          value: 'unfinish2',
          label: '未尽收款合同订单'
        }, {
          value: 'unfinish3',
          label: '未尽发货的订单'
        }]
      }, {
        label: '时间',
        options: [{
          value: 'time1',
          label: '30天内到期的合同订单'
        }, {
          value: 'time2',
          label: '已到期的合同订单'
        }, {
          value: 'time3',
          label: '本月签署的合同订单'
        },{
          value: 'time4',
          label: '本年签署的合同订单'
        }]
      }, {
        label: '类型',
        options: [{
          value: 'type1',
          label: '产品销售'
        }, {
          value: 'type2',
          label: '服务'
        }, {
          value: 'type3',
          label: '业务合作'
        },{
          value: 'type4',
          label: '代理分销'
        },{
          value: 'type5',
          label: '其他'
        }]
      }],
      datavalue:'',
      /*弹出框的分类*/
      sorts: [{
        value: '选项1',
        label: '产品销售'
      }, {
        value: '选项2',
        label: '服务'
      }, {
        value: '选项3',
        label: '业务合作'
      }, {
        value: '选项4',
        label: '代理分销'
      }, {
        value: '选项5',
        label: '其他'
      }],
      //分类下拉框值
      sortvalue:'',
      /*弹出框的付款方式*/
      pays: [{
        value: '选项1',
        label: '支票'
      }, {
        value: '选项2',
        label: '现金'
      }, {
        value: '选项3',
        label: '邮政汇款'
      }, {
        value: '选项4',
        label: '电汇'
      }, {
        value: '选项5',
        label: '网上银行'
      },{
        value: '选项6',
        label: '其他'
      }],
      //付款方式下拉框值
      payvalue:'',
      /*弹出框的付款方式*/
      paytimes: [{
        value: '选项1',
        label: '现款现结'
      }, {
        value: '选项2',
        label: '货到付款'
      }, {
        value: '选项3',
        label: '先款后货'
      }, {
        value: '选项4',
        label: '账期收款'
      }, {
        value: '选项5',
        label: '月结'
      },{
        value: '选项6',
        label: '季结'
      },{
        value: '选项7',
        label: '年结'
      }],
      //结款方式下拉框值
      paytime:'',
      //开始时间
      starttime:'',
      //结束时间
      endtime:'',
      //签约时间
      signtime:'',
      //合同状态
      radio: 1,
      //自适应文本域
      textarea1:'',
      textarea2:'',
      dialogFormVisible: false,
      totalSize: 0,
      Contract: {
        //合同id
        id: 0,
        //机会主题
        theme: '',
        //对应客户
        client: '',
        //对应机会
        chance:'',
        //合同订单号
        contract_id:0,
        //分类
        sort:'',
        //总金额
        total:0,
        //付款方式
        pay:'',
        //交付地点
        pay_area:'',
        //产品/服务
        product:'',
        //开始时间
        start_time:'',
        //结束时间
        end_time:'',
        //客户签约人
        customer_signer:'',
        //我方签约人
        our_signer:'',
        //所有者
        owner:'',
        //签约时间
        sign_time:'',
        //回款金额
        back:0,
        //结款方式
        pay_time:'',
        //状态
        status: '',
        //项目
        project:'',
        //合同正文及附件
        main_text:'',
        //备注
        remarks:''
      },
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,

      rules: {
        name: [
          { required: true, message: '请输入机会主题', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]},
      mulSelection: []
    }
  },
  methods: {
    open () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  .dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;

  }
  .dialog__header{
    padding: 20px 20px 40px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .cursor{
    cursor: pointer;
  }
</style>
